<template>
  <div class="about">
    <van-nav-bar
      :title="userInfo.radio === '01' ? '在线客服' : custumerName"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="messageBox">
      <div class="message">
        <div class="enterBox">
          <div
            class="enterBoxItem"
            v-for="(item, index) in enterList"
            :key="index"
          >
            {{
              item.radio === "02"
                ? "客服进入了在线咨询"
                : `${item.username}进入了在线咨询`
            }}
          </div>
        </div>
      </div>
      <div class="opreation">
        <div>
          <van-field
            v-model="message"
            rows="1"
            autosize
            type="textarea"
            placeholder="请输入消息"
          />
        </div>
        <div>
          <van-button round icon="smile-o" size="small" type="default" />
        </div>
        <div>
          <van-button round icon="plus" size="small" type="default" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "",
      custumerName: "客户",
      websock: null,
      enterList: [],
    };
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
  },
  mounted() {
    console.log(JSON.parse(localStorage.getItem("userInfo")));
  },
  created() {
    this.initWebSocket();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    initWebSocket() {
      //初始化weosocket
      const wsuri = "ws://localhost:8080";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      let actions = { ...this.userInfo, type: "typeEnter" };
      this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //数据接收
      let redata = JSON.parse(e.data);
      let { type, radio, username } = redata;
      if (type === "typeEnter") {
        delete redata[type];
        radio === "01" && (this.custumerName = `客户${username}`);
        this.enterList.push(redata);
      }
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },
    // 给后端发送消息
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
  },
};
</script>
<style lang="scss">
$width: 46px;
.about {
  width: 100vw;
  height: 100vh;
  .messageBox {
    height: calc(100% - #{$width});
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    .message {
      flex: 1;
      width: 100%;
      overflow: auto;
      margin-bottom: 60px;
      .enterBox {
        .enterBoxItem {
          width: 100vw;
          color: darkgrey;
          font-size: 12px;
          text-align: center;
          height: 20px;
          line-height: 20px;
        }
      }
    }
    .opreation {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60px;
      background-color: rgb(245, 245, 245);
      display: grid;
      grid-template-columns: auto 50px 40px;
      text-align: center;
      box-sizing: border-box;
      padding: 10px 0 10px 10px;
      justify-items: center;
      align-items: center;
      justify-items: stretch;
      .van-cell {
        padding: 8px 16px;
      }
    }
  }
}
</style>

